<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>双向选择</title>
		<script type="text/javascript" src="js/jquery-1.12.4.min.js" ></script>
		<script type="text/javascript" src="js/jquery.easyui.min.js" ></script>
		<link rel="stylesheet" href="css/themes/default/easyui.css" />
		<link rel="stylesheet" href="css/themes/icon.css"/>
		<script type="text/javascript" src="js/data.js" ></script>
		<script type="text/javascript">
			var datas = {
						total:10,
						rows:[{
							ID:1,
							TEXT:'type1值1',
							PINYIN:'abc',
							TYPE:'type1'
						},{
							ID:2,
							TEXT:'type1值2',
							PINYIN:'abc',
							TYPE:'type2'
						},{
							ID:3,
							TEXT:'type1值3',
							PINYIN:'abc',
							TYPE:'type3'
						},{
							ID:4,
							TEXT:'type1值4',
							PINYIN:'abc',
							TYPE:'type2'
						},{
							ID:5,
							TEXT:'type1值5',
							PINYIN:'abc',
							TYPE:'type2'
						},{
							ID:6,
							TEXT:'type1值6',
							PINYIN:'abc',
							TYPE:'type3'
						},{
							ID:7,
							TEXT:'type1值7',
							PINYIN:'abc',
							TYPE:'type2'
						},{
							ID:8,
							TEXT:'type1值8',
							PINYIN:'abc',
							TYPE:'type1'
						},{
							ID:9,
							TEXT:'type1值9',
							PINYIN:'abc',
							TYPE:'type3'
						},{
							ID:10,
							TEXT:'type1值10',
							PINYIN:'abc',
							TYPE:'type1'
						}
				]
			};
			$(function(){
					/**
					 * 根据dest决定source的选中状态
					 * @param {String} source 设置是否选中的datagrid
					 * @param {String} dest	决定source是否选中的目标datagrid
					 * @param {Number} rowIndex 要选中的行的下标
					 * @param {Object} rowData 要选中的行的数据
					 * @param {Boolean} ifSelect 是否不能被取消选中
					 */
					function ifSelectRow(source,dest,rowIndex,rowData,ifSelect){
						try{
							var selecteds = $('#'+dest).datagrid('getRows');
							var sourceIdField = $('#'+source).datagrid('options').idField;
							var destIdField = $('#'+dest).datagrid('options').idField;
							var flag = false;
							$.each(selecteds, function() {
								if(rowData[sourceIdField] == this[destIdField]){
									flag = true;
									return false;
								}
							});
							if(flag){
								if(ifSelect){
									$('#'+source).datagrid('selectRow',rowIndex);
									$('#'+source).datagrid('checkRow',rowIndex);
								}
								else {
									$('#'+source).datagrid('unselectRow',rowIndex);
									$('#'+source).datagrid('uncheckRow',rowIndex);
								}
						  	}
						}catch(e){
							
						}
					}
			
					/**
					 * source与dest相同的部分选中，不同的部分取消选中
					 * @param {String} source 源datagrid
					 * @param {String} dest 目标datagrid
					 */
					function ifSelectAllRow(source,dest){
						try{
							var selecteds = $('#'+dest).datagrid('getRows');
							var rows = $('#'+source).datagrid('getRows');
							var sourceIdField = $('#'+source).datagrid('options').idField;
							var destIdField = $('#'+dest).datagrid('options').idField;
							$.each(rows, function(index) {
								var flag = false;
								var rowData=this;
								$.each(selecteds, function() {
										if(rowData[sourceIdField] == this[destIdField]){
											flag = true;
											return false;
										}
								});
								var rowIndex = $('#'+source).datagrid('getRowIndex',this);
								if(flag){
									$('#'+source).datagrid('selectRow',rowIndex);
									$('#'+source).datagrid('checkRow',rowIndex);
								}else{
									$('#'+source).datagrid('unselectRow',rowIndex);
									$('#'+source).datagrid('uncheckRow',rowIndex);
								}
							});
						}catch(e){
							
						}
					}
				     $('#unSelectGrid').datagrid({
							height:'100%',
							width:'100%',
							pagination:false,
							title:'未选择列表',
							idField:'ID',
							singleSelect:false,
							fitColumns:true,
							toolbar:'#unSelectGridToolBar',
							fit:true,
							striped:true,
							data:datas,
							cache:false,
							columns:[[
							{
								field:'ID',
								checkbox:true
							},{
								field:'TEXT',
								width:'55%',
								title:'值'
							},{
								field:'PINYIN',
								width:'20%',
								title:'拼音'
							},{
								field:'TYPE',
								width:'20%',
								title:'类型'
							}
							]],
							onClickRow:function(rowIndex,rowData){
								ifSelectRow('unSelectGrid','selectedGrid',rowIndex,rowData,true);
							},
							onUncheck:function(rowIndex,rowData){
								ifSelectRow('unSelectGrid','selectedGrid',rowIndex,rowData,true);
							},
							onUncheckAll:function(rows){
								ifSelectAllRow('unSelectGrid','selectedGrid');
							},
							onLoadSuccess:function(data){
								ifSelectAllRow('unSelectGrid','selectedGrid');
							}
							
						});
						$('#selectedGrid').datagrid({
							height:'100%',
							width:'100%',
							pagination:false,
							title:'已选择列表',
							toolbar:'#selectedGridToolBar',
							idField:'ID',
							fit:true,
							singleSelect:false,
							fitColumns:true,
							cache:false,
							striped:true,
							columns:[[
							{
								field:'ID',
								checkbox:true
							},{
								field:'TEXT',
								title:'值',
								width:'55%'
							},{
								field:'PINYIN',
								title:'拼音',
								width:'20%'
							},{
								field:'TYPE',
								title:'类型',
								width:'20%'
							}
							]]
							
						});
					$('#selectBtn').bind('click',function(e){
						$('#selectDialog').dialog({
							width:800,
							height:600,
							modal:true,
							cache:false,
							closed:false,
							title:'树形双向选择',
							buttons:[{
								text:'确定',
								iconCls:'icon-ok',
								handler:function(e){
									
								}
							},{
								text:'关闭',
								iconCls:'icon-no',
								handler:function(e){
									$('#selectDialog').dialog('close');
								}
							}
							],
							onLoad:function(){
								
							}
						});
						
					});
				/**
			    * 从源移动到目标
			    * @param {String} source源
			    * @param {String} dest目标
			    * @param {Boolean} ifAppend是否新增行
			    * @param {Boolean} ifRemove是否移除行
			    */
				function moveToDest(source,dest,ifAppend,ifRemove){
					var wanaInserts = $('#'+source).datagrid('getSelections');
					var rdatas = new Array();
					$.each(wanaInserts,function(){
					   var index = $('#'+dest).datagrid('getRowIndex',this);
					   if(ifAppend&&index==-1){
					   		$('#'+dest).datagrid('appendRow',this);
					   }
					   if(ifRemove){
					   		rdatas.push(this);
					   }
					});
					if(ifRemove){
						$.each(rdatas, function() {
							var ridx = $('#'+source).datagrid('getRowIndex',this);
							$('#'+source).datagrid('deleteRow',ridx);
						});
						ifSelectAllRow('unSelectGrid','selectedGrid');
					}
				}
				
				$('#unSelectBtn').bind('click',function(e){
					moveToDest('selectedGrid','unSelectGrid',false,true);
					$('#selectedNumLabel').text("已选择" + $('#selectedGrid').datagrid('getRows').length + "条");
				});
				
				$('#selectedBtn').bind('click',function(e){
					moveToDest('unSelectGrid','selectedGrid',true,false);
					$('#selectedNumLabel').text("已选择" + $('#selectedGrid').datagrid('getRows').length + "条");
				});
				
				$('#type').combobox({
					onChange:function(newValue,oldValue){
						ifSelectAllRow('unSelectGrid','selectedGrid');
					}
				});
				$('#search').textbox({
					handler:{
						blur:function(){
							ifSelectAllRow('unSelectGrid','selectedGrid');
						}
					}
				});
			});
			
			function search(){
				var type =$('#type').combobox('getValue');
				var search = $('#search').textbox('getValue');
				if(datas!=null){
					var ndata = new Object();
					var rows = new Array();
					$.each(datas.rows,function(){
						if(this.TYPE.search(type)!=-1&&(this.PINYIN.search(search)!=-1||this.TEXT.search(search)!=-1)){
							rows.push(this);
						}
					});
					ndata['total'] = rows.length;
					ndata['rows'] = rows;
					$('#unSelectGrid').datagrid('loadData',ndata);
				}
			}
		</script>
	</head>
	<body>
		<button id="selectBtn">选择</button>
		<div  id="selectDialog">
			<div class="easyui-layout" data-options="width:'100%',height:'100%',collapsible:false">
				<div data-options="region:'west',width:'42.5%',height:'100%'">
					<div id="unSelectGridToolBar">
						<form>
							<table>
								<tr>
									<td>分类：</td>
									<td>
										<select class="easyui-combobox" style="width: 100px;" name="type" id="type" data-options="editable:false,panelHeight:null,valueField:'value',textField:'text',data:[{value:'type1',text:'类型1'},{value:'type2',text:'类型2'},{value:'type3',text:'类型3'}],
											onSelect:function(record){
										 	search();
										}"></select>
									</td>
									<td>
										检索：
									</td>
									<td><input class="easyui-textbox" name="search" id="search" size="10"/></td>
									<td><a class="easyui-linkbutton" href="javascript:void(0)"  
										data-options="iconCls:'icon-search',onClick:function(){
										   search();
									}"></a></td>
								</tr>
								
							</table>
						</form>
					</div>
					<table id="unSelectGrid">
					</table>
				</div>
				<div data-options="region:'center',width:'15%',height:'100%'">
					<div class="" style="margin-top:200px;width:100%;text-align: center;">
						<button id="unSelectBtn">删除右侧选中</button>
						<br /><br />
						<button id="selectedBtn">左侧选中移到右侧</button>
					</div>
				</div>
				<div data-options="region:'east',width:'42.5%',height:'100%',collapsible:false">
					<div id="selectedGridToolBar">
						<label id = "selectedNumLabel" style="margin:5px 5px;font-size:18px;color:#AAAAAA">已选择0条</label>
					</div>
					<table  id="selectedGrid">
						
					</table>
				</div>
			</div>
			
		</div>
		<div id="template"></div>
	</body>
</html>
